// 判断用户是否登录--调用函数
checkLogin()
//  读取并渲染用户名
rederUserName()
// 退出登录
logout()

// 获取学生统计数据
async function getDate() {
    const { data } = await axios({
        url: '/dashboard',
    })
    // 面板区域
    renderOveriew(data.overview)
    console.log(data);
    // 学科资薪
    renderLineYearSalary(data.year)
    // 班级资薪分布
    renderPieClassSalary(data.salaryData)
    // 班级每组薪资
    randerBarGroupSalary(data.groupData)
    // 男女薪资分布
    randerPieGenderSalary(data.salaryData)
    // 籍贯分布
    randomData(data.provinceData)
    console.log(data.provinceData);

}
getDate()
// 错了可以打印看bug--------------------
function renderOveriew(overview) {
    console.log(overview);
    Object.keys(overview).forEach(ele => {
        document.querySelector(`.${ele}`).innerHTML = overview[ele]

    })
}

// 班级薪资分布
function renderPieClassSalary(salaryData) {
    const myChart = echarts.init(document.querySelector('#salary'))
    console.log(myChart);
    const option = {
        title: {
            text: '班级薪资分布',
            top: '12',
            left: '15'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: '5%',
            left: 'center'
        },
        color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
        series: [
            {
                name: '班级薪资分布',
                type: 'pie',
                radius: ['55%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: false,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data:
                    salaryData.map(ele => {
                        return {
                            name: ele.label,
                            value: ele.g_count + ele.b_count
                        }
                    }
                    )

                // data: [
                //   { value: 1048, name: '1万以上' },
                //   { value: 735, name: '1-1.5万' },
                //   { value: 580, name: '1.5-2万' },
                //   { value: 484, name: '2万以上' },
                // ]

            }
        ]
    };


    myChart.setOption(option);
}
// 男女薪资分布
function randerPieGenderSalary(salaryData) {
    console.log('男女薪资分布');
    const myChart = echarts.init(document.querySelector('#gender'))
    const option = {
        title: [
            {
                text: '男女薪资分布',
                top: '15',
                left: '12',
                textStyle: {
                    fontSize: 16
                },

            },
            {
                text: '女生',
                top: '45%',
                left: '50%',
                textStyle: {
                    fontSize: 12
                },

            },
            {
                text: '男生',
                top: '90%',
                left: '50%',
                textStyle: {
                    fontSize: 12
                },

            },

        ],
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '男女薪资分布',
                type: 'pie',
                center: ['50%', '30%'],
                radius: ['20%', '30%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    //   position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 10,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: true
                },
                center: ['50%', '25%'],
                // data:salaryData[0].map(ele=>ele.name)

                data: salaryData.map(ele => {
                    return {
                        name: ele.label,
                        value: ele.b_count
                    }
                }),
            },
            {
                name: '男女薪资分布',
                type: 'pie',
                center: ['50%', '70%'],
                radius: ['20%', '30%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    //   position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 10,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: true
                },
                center: ['50%', '75%'],
                data: salaryData.map(ele => {
                    return {
                        name: ele.label,
                        value: ele.b_count
                    }
                }),
            }
        ]
    };
    myChart.setOption(option);

}
// 班级每组薪资
function randerBarGroupSalary(groupData) {
    console.log('班级每组薪资', groupData);
    const myChart = echarts.init(document.querySelector('#lines'))
    const option = {
        tooltip: {
            trigger: 'item'
        },
        xAxis: {
            type: 'category',
            color: 'blue',
            axisLabel: {
                lineStyle: {
                    type: 'dashed',
                    color: 'blue'
                },
            },
            data: groupData[1].map(ele => ele.name)
        },

        yAxis: {
            type: 'value',
            color: 'blue',
            axisLabel: {
                lineStyle: {
                    type: 'dashed',
                    color: 'blue'
                },
            },
        },
        grid: {
            left: '70',
            top: '30',
            right: '50',
            bottom: '30'
        },
        series: [
            {
                data: groupData[1].map(ele => ele.hope_salary),
                type: 'bar',
                name: '期望薪资',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#34D39A' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
            },
            {
                data: groupData[1].map(ele => ele.salary),
                type: 'bar',
                name: '实际薪资',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#499FEE' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
            }
        ]
    };
    myChart.setOption(option);
    const btns = document.querySelector('#btns')
    btns.addEventListener('click', function (e) {
        const target = e.target
        console.log(target);
        if (target.tagName === 'BUTTON') {
            document.querySelector('.btn-blue').classList.remove('btn-blue')
            target.classList.add('btn-blue')
            const text = target.innerHTML
            option.xAxis.data = groupData[text].map(ele => ele.name)
            option.series[0].data = groupData[text].map(ele => ele.hope_salary),
                option.series[1].data = groupData[text].map(ele => ele.salary),
                myChart.setOption(option);
        }
    })
}

//  学科走势
function renderLineYearSalary(year) {
    console.log(year);
    const myChart = echarts.init(document.querySelector('#line'))
    const option = {
        title: {
            text: '2022全科薪资走势',
            top: '20',
            left: '15'
        },
        tooltip: {
            trigger: 'item'
        },
        xAxis: {
            axisLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'blue'

                }
            },
            type: 'category',
            boundaryGap: false,
            data: year.map(ele => ele.month)
        },
        yAxis: {
            splitLine: {
                type: 'value',
                lineStyle: {
                    // 使用深浅的间隔色
                    type: 'dashed',
                    color: 'pink'
                }
            },
            type: 'value'
        },
        grid: {
            top: '20%',
            left: '10%'
        },
        series: [
            {
                data: year.map(ele => ele.salary),
                symbolSize: '10',
                lineStyle: {
                    width: '5',
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#4a9cee' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#5a7aef' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                type: 'line',
                smooth: true, //平滑曲线
                areaStyle: {  //阴影区域
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#b7d9f8' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }

                }
            }
        ]
    };
    myChart.setOption(option);
}

// 中国地图
function randomData(provinceData) {
    const myChart = echarts.init(document.querySelector('#map'))
    const dataList = [
        { name: '南海诸岛', value: 0 },
        { name: '北京', value: 0 },
        { name: '天津', value: 0 },
        { name: '上海', value: 0 },
        { name: '重庆', value: 0 },
        { name: '河北', value: 0 },
        { name: '河南', value: 0 },
        { name: '云南', value: 0 },
        { name: '辽宁', value: 0 },
        { name: '黑龙江', value: 0 },
        { name: '湖南', value: 0 },
        { name: '安徽', value: 0 },
        { name: '山东', value: 0 },
        { name: '新疆', value: 0 },
        { name: '江苏', value: 0 },
        { name: '浙江', value: 0 },
        { name: '江西', value: 0 },
        { name: '湖北', value: 0 },
        { name: '广西', value: 0 },
        { name: '甘肃', value: 0 },
        { name: '山西', value: 0 },
        { name: '内蒙古', value: 0 },
        { name: '陕西', value: 0 },
        { name: '吉林', value: 0 },
        { name: '福建', value: 0 },
        { name: '贵州', value: 0 },
        { name: '广东', value: 0 },
        { name: '青海', value: 0 },
        { name: '西藏', value: 0 },
        { name: '四川', value: 0 },
        { name: '宁夏', value: 0 },
        { name: '海南', value: 0 },
        { name: '台湾', value: 0 },
        { name: '香港', value: 0 },
        { name: '澳门', value: 0 },
    ]
    // 1.遍历准备好的假数据
    dataList.forEach(ele => {
        // console.log(ele);
        // 遍历的过程中，真实的省份列表进行查找
        // （拿真实数据的每一项的name 和假数据的name做对比）
        // const res=provinceData.find(v.name ===ele.name)
        // 青海省 包含青海
        // 数组 includes 判断是否包含某一项
        // 字符串  includes 判断是否包含某个字符串
        // v.name 真实数据 -带省 或者自治区...
        // ele.name 假数据(插件要求的字段属性名)
        // const res = provinceData.find(v => {
        //     return v.name.includes(ele.name)
        // })
        const reg = /省|壮族自治区|自治区|维吾尔自治区|回族自治区/g
        const res = provinceData.find(v => {
            return v.name.replace(reg, '') === ele.name
        })
        if (res !== undefined) {
            ele.value = res.value

        }
    })

    const option = {
        title: {
            text: '籍贯分布',
            top: 10,
            left: 10,
            textStyle: {
                fontSize: 16,
            },
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} 位学员',
            borderColor: 'transparent',
            backgroundColor: 'rgba(0,0,0,0.5)',
            textStyle: {
                color: '#fff',
            },
        },
        visualMap: {
            min: 0,
            max: 6,
            left: 'left',
            bottom: '20',
            text: ['6', '0'],
            inRange: {
                color: ['#ffffff', '#0075F0'],
            },
            show: true,
            left: 40,
        },
        geo: {
            map: 'china',
            roam: false,
            zoom: 1.0,
            label: {
                normal: {
                    show: true,
                    fontSize: '10',
                    color: 'rgba(0,0,0,0.7)',
                },
            },
            itemStyle: {
                normal: {
                    borderColor: 'rgba(0, 0, 0, 0.2)',
                    color: '#e0ffff',
                },
                emphasis: {
                    areaColor: '#34D39A',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },
        },
        series: [
            {
                name: '籍贯分布',
                type: 'map',
                geoIndex: 0,
                data: dataList,
            },
        ],
    }

    myChart.setOption(option);
}


